import Icon from '@/components/Icon'
import styled from 'styled-components'
export const StyledWrap = styled.div`
	.content {
		width: 120px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 14px 0;
		line-height: 20px;
		font-size: 12px;
		color: #4e4e4e;
		.btn-wrap {
			padding: 10px 14px 10px 20px;
			.start-btn-wrap,
			.stop-btn-wrap {
				display: flex;
				align-items: center;
			}
		}
		.use-plan-wrap,
		.edit-vmp {
			height: 34px;
			line-height: 34px;
			padding: 0 14px 0 20px;
		}
		.plan_name {
			color: #b4b4b4;
		}

		.line {
			cursor: pointer;
			&:hover {
				background-color: #4face3;
				color: #fff;
				.stop-icon {
					background-position: -324px -3304px;
				}
				.start-icon {
					background-position: -288px -3304px;
				}
				.plan_name {
					opacity: 0.6;
					color: #fff;
				}
			}
		}
	}
	.loading-panel {
		width: 120px;
	}
`
export const StartIcon = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -270px -3304px;
`
export const StopIcon = styled(Icon)`
	width: 18px;
	height: 18px;
	background-position: -306px -3304px;
`
